<template>
  <header class="blog-header">
    <nav class="header-nav">
      <a href="#" style="color: black;" class="nav-link" @click="router.push('/user')">首页</a>
      <a href="#" style="color: black;" class="nav-link">联系</a>
      <a href="#" style="color: black;" class="nav-link add-blog-btn" @click.prevent="showAddBlogPage(true)">
        添加博客
      </a>
      <a href="#" style="color: black;" class="nav-link" @click="$router.replace('/login')">登录界面</a>
    </nav>
    <div class="header-content">
      <!-- <h1 style="color: black;">生活琐事</h1> -->
      <img src="https://bu.dusays.com/2024/12/07/6753a8bf7dffe.png" /><br>
      <p style="color: black;">一个关于技术、设计和生活的博客</p>
    </div>
  </header>
  <div class="page-container">
    <!-- Left sidebar (empty for now but matching the layout) -->
    <aside class="left-sidebar"></aside>

    <!-- Main content area -->
    <main class="main-content">
      <div class="blog_info" style="display: flex; flex-direction: column; align-items: center">
        <div class="title">
          <h1>{{ blog_user.blogTitle }}</h1>
        </div>
        <div class="desc">
          <span style="color: rgb(177, 177, 177)">{{ blog_user.blogDesc }}</span>
        </div>
        <div class="date">
          <span>发布时间:&nbsp;&nbsp;{{ blog_user.sendDate }}</span>
        </div>
      </div>
      <article  class="markdown-body" v-html="renderedContent"></article>
    </main>

    <!-- Right sidebar -->
    <aside class="right-sidebar">
      <!-- Author info card -->
      <div class="author-card">
        <img :src="blog_user.avatar" class="author-avatar" />
        <h3 class="author-name">{{ blog_user.userName }}</h3>
        <p class="author-bio">生活明朗，万物可爱</p>
        <div class="author-social">
          <a href="#" class="social-link">
            <i class="fab fa-github"></i>
          </a>
          <a href="#" class="social-link">
            <i class="fab fa-twitter"></i>
          </a>
        </div>
      </div>

      <!-- Comments section -->
      <div class="comments-section">
        <h3 class="comments-title">评论</h3>
        <div class="comment" v-for="comment in comments" :key="comment.id">
          <div class="comment-header">
            <img :src="comment.avatar" :alt="comment.author" class="comment-avatar" />
            <div class="comment-meta">
              <span class="comment-author">{{ comment.userName }}</span>
              <span class="comment-date">{{ comment.sendDate.split('T')[0] }}</span>
            </div>
          </div>
          <p class="comment-content">{{ comment.content }}</p>
          <button v-show="isFlag" @click="deleteComment(comment.talkID)">删除</button>
        </div>

        <!-- Comment form -->
        <div class="comment-form">
          <textarea v-model="newComment" placeholder="写下你的评论..." class="comment-input"></textarea>
          <button @click="submitComment" class="comment-submit">提交评论</button>
        </div>
      </div>
    </aside>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { marked } from 'marked'
import request from '@/utils/request.js'
import { downloadFile } from '@/utils/api'
import { useRoute } from 'vue-router'
import router from '@/router'
import { ElMessage } from 'element-plus'

const renderedContent = ref('') // 用于存储渲染后的Markdown内容
const newComment = ref('') // 用于存储新评论内容
const blog_user = ref({}) // 用于存储博客信息
const comments = ref({}) // 用于存储评论信息
const isFlag=ref() //判断是否为作者

// 评论的点击事情， 用于发送评论，并且发送成功后清零输入框还有刷新评论区
const submitComment = () => {

  //发送评论
  request
    .post('/comment/addNewComment', {
      blogID: blog_user.value.blogID,//传入博客ID
      content: newComment.value //评论的内容
    })
    .then(async (res) => {
      //发送评论成功后，更新评论区
      await request
        .get('/comment/getBlogComment', {
          params: {
            blogId: blog_user.value.blogID//传入博客ID
          }
        })
        .then(async (res) => {
          //赋值评论表
          comments.value = res.data
          //遍历评论，下载头像
          comments.value.forEach(async comment => {
            comment.avatar = await downloadFile(comment.avatar)
          })
        })
      newComment.value = '' //清空输入框
    })
}

const deleteComment = (talkID) => {
  request.get(`/comment/deleteComment/${talkID}`).then(async (res)=>{
    if(res.code==200)
    {
      ElMessage.success('删除成功')
      await request
        .get('/comment/getBlogComment', {
          params: {
            blogId: blog_user.value.blogID//传入博客ID
          }
        })
        .then(async (res) => {
          //赋值评论表
          comments.value = res.data
          //遍历评论，下载头像
          comments.value.forEach(async comment => {
            comment.avatar = await downloadFile(comment.avatar)
          })
        })
    }
    else
    {
      ElMessage.error('删除失败')
    }
  })
}

//初始化
onMounted(async () => {
  const markdownContent = ref(``)
  const route = useRoute()
  const blogId = route.params.id // 从路由参数中获取id

  //博客信息
  await request
    .get('/blog/getBlogDetail', {
      params: {
        blogId: blogId //传入博客id
      }
    })
    .then(async (res) => {
      //赋值博客表
      blog_user.value = res.data
      //处理日期格式
      blog_user.value.sendDate = blog_user.value.sendDate.split('T')[0]

      //判断作者身份
      const storedSessionToken=sessionStorage.getItem('system-user')
      if(blog_user.value.userID==storedSessionToken)
      {
        console.log("符合身份");
        isFlag.value=true
      }
      else{
        console.log("不符合身份");
        isFlag.value=false
      }

      //下载头像
      try {
        blog_user.value.avatar = await downloadFile(res.data.avatar)
        console.log(blog_user.value.avatar)
      } catch (error) {
        blog_user.value.avatar =
          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      }

      // 处理markdown内容
      markdownContent.value = blog_user.value.content
      renderedContent.value = marked(markdownContent.value)
    })

  //博客评论
  await request
    .get('/comment/getBlogComment', {
      params: {
        blogId: blogId
      }
    })
    .then(async (res) => {
      console.log(res.data)
      comments.value = res.data
      comments.value.forEach(async comment => {
        comment.avatar = await downloadFile(comment.avatar)
      })
    })
})
</script>

<style scoped>
.page-container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  gap: 2rem;
  max-width: auto;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  background: url('https://bu.dusays.com/2024/12/06/67531d84497e3.png') no-repeat center center;
}

.left-sidebar {
  position: sticky;
  top: 2rem;
}

.main-content {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.right-sidebar {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Author card styles */
.author-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.author-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.author-bio {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.author-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-link {
  color: #666;
  text-decoration: none;
}

/* Comments section styles */
.comments-section {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comments-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.comment {
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}

.comment:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-meta {
  display: flex;
  flex-direction: column;
}

.comment-author {
  font-weight: 500;
}

.comment-date {
  font-size: 0.8rem;
  color: #666;
}

.comment-content {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.comment-form {
  margin-top: 1rem;
}

.comment-input {
  width: 100%;
  min-height: 100px;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  resize: vertical;
}

.comment-submit {
  background: #4a90e2;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.comment-submit:hover {
  background: #357abd;
}

/* Markdown content styles */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #24292e;
}

.markdown-body h1 {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
  margin-top: 24px;
  margin-bottom: 16px;
}

.markdown-body h2 {
  font-size: 1.5em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
  margin-top: 24px;
  margin-bottom: 16px;
}

.markdown-body code {
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  background-color: rgba(27, 31, 35, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 85%;
}

.markdown-body pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
}

.markdown-body pre code {
  background-color: transparent;
  padding: 0;
}

.markdown-body blockquote {
  margin: 0;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}

.markdown-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

@media (max-width: 1200px) {
  .page-container {
    grid-template-columns: 1fr 300px;
  }

  .left-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-container {
    grid-template-columns: 1fr;
  }

  .right-sidebar {
    position: static;
  }
}

.blog-header {
  background: url('https://bu.dusays.com/2024/12/06/67531c5a627a5.png') no-repeat center center;
  color: white;
  padding: 1rem 1rem;
  text-align: center;
}

.header-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  margin: 0 0.5rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: white;
}

.header-content h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.header-content p {
  font-size: 1.1rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}
</style>
